<template>
  <!-- 显示数据 -->
  <el-table :data="parturitionList" style="width: 100%" @selection-change="checkAll">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="parturitionId" label="序号" />
    <el-table-column prop="auricle" label="种母耳号" />
    <el-table-column prop="pregnancyDay" label="妊娠天数" />
    <el-table-column prop="buildingName" label="栋舍" />
    <el-table-column prop="columnsName" label="栏位" />
    <el-table-column prop="parturitionDate" label="配种日期" >
      <template v-slot="scope">
        {{ scope.row.parturitionDate.substring(0,10) }}
      </template>
    </el-table-column>
    <el-table-column prop="parturitionDelivery" label="预产日期" >
      <template v-slot="scope">
        {{ scope.row.parturitionDelivery.substring(0,10) }}
      </template>
    </el-table-column>
    <el-table-column prop="pregnancyName" label="类型" >
      <template v-slot="scope">
        <el-tag type="primary" v-if="scope.row.pregnancyName == 1">提示</el-tag>
        <el-tag type="danger" v-else>无提示</el-tag>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <table>
    <tr>
      <!-- 1. -->
      <td>
        <el-pagination
          v-model:current-page="form.pageIndex"
          v-model:page-size="form.pageSize"
          :page-sizes="[1, 3, 6, 9]"
          :size="form.pageSize"
          :background="true"
          layout="total,slot, sizes"
          :total="form.totalCount"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          数据，每页显示{{ form.pageSize }}条数据，当前第1/{{
            form.pageIndex
          }}页，共{{ form.pageCount }}页。
        </el-pagination>
      </td>
      <!-- 2. -->
      <td>
        <el-pagination
          v-model:current-page="form.pageIndex"
          v-model:page-size="form.pageSize"
          :page-sizes="[1, 3, 6, 9]"
          :size="form.pageSize"
          :background="true"
          layout="slot,prev, pager"
          :total="form.totalCount"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <el-button @click="handleCurrentChange(1)">首页</el-button>
        </el-pagination>
      </td>
      <!-- 3. -->
      <td>
        <el-pagination
          v-model:current-page="form.pageIndex"
          v-model:page-size="form.pageSize"
          :page-sizes="[1, 3, 6, 9]"
          :size="form.pageSize"
          :background="true"
          layout="next,slot, jumper"
          :total="form.totalCount"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <el-button @click="handleCurrentChange(form.pageCount)"
            >尾页</el-button
          >
        </el-pagination>
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
//生命周期 钩子函数
onMounted(() => {
  getParturitionList(); //分娩提示-显示
});

//定义变量
const form=reactive({

//分页
pageIndex: 1,
pageSize: 2,
totalCount: 0,
pageCount: 0,
})

//全选反选
const checked=ref([]);
const checkAll = (val: any) => {
  checked.value = val;
}

//分娩提示-显示
const parturitionList= ref([]);
const getParturitionList = () => {
  axios
    .post("http://localhost:24925/api/Parturitions/ParturitionsList",{
      pageSize:form.pageSize,
      pageIndex:form.pageIndex
    })
    .then((res) => {
      console.log(res.data.data);
      parturitionList.value = res.data.data.data;
      form.pageCount=res.data.data.pageCount;
      form.totalCount=res.data.data.totalCount;
    })
    .catch((err) => {
      console.log(err);
    });
};
//分页
const handleSizeChange = (val: number) => {
  form.pageSize = val;
  getParturitionList();
};
const handleCurrentChange = (val: number) => {
  form.pageIndex = val;
  getParturitionList();
};
</script>